<template>
  <div class="chat-flex" @wheel="handelWheel" ref="chatRef">
    <div class="place-holder"></div>
    <Message
      class="message"
      v-for="(item, index) in messages"
      :key="index"
      :content="item.content"
      :role="item.role"
    ></Message>
  </div>
</template>

<script>
import Message from "@/components/Chat/Message.vue";

export default {
  props: {
    messages: {
      type: [],
      default: function () {
        return [];
      },
    },
  },
  name: "ChatFlex",
  data() {
    return {};
  },
  methods: {
    handelWheel(event) {
      event.preventDefault();
      const { deltaY } = event;
      this.$refs.chatRef.scrollTop += deltaY;
      // this.$nextTick(() => {
      //   this.$refs.chatRef.scrollTop =
      //     this.$refs.chatRef.scrollHeight;
      // });
    },
  },
  components: {
    Message,
  },
};
</script>

<style  lang="less" scoped>
.chat-flex {
  width: 100%;
  height: 820px;
  border-radius: 4px;
  background-color: rgb(232, 255, 221);
  padding: 10px 8px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column-reverse;
  gap: 20px;
  overflow: auto;
  .place-holder {
    background: rgb(232, 255, 221);
    flex-grow: 1;
    flex-shrink: 1;
  }
}
</style>
<style>
.message {
  margin-right: 0px;
}
</style>